<template>
	<view class="home-warp">
		<view class="status_bar"></view>
		<!-- 首页背景 -->
		<image class="img-mask"   src="http://xiao.wanting.store/static/images/beijing527.jpg" mode="aspectFill"></image>
		<scroll-view class="container-show" :style="{ height:scrollViewHeight}">
			<view class="home-title">万艇</view>
			<!-- 搜索栏 -->
			<view class="search-warp">
				<view class="search-icon">
					<image style="width:100%;height: 100%;" src="@/static/images/search-icon.png"></image>
				</view>
				<input v-model="searchValue" @click="jumpSearchPage" class="input-el" type="text" placeholder="搜索" placeholder-class="placeholder-text" />
			</view>
			<view class="divider"></view>
			<view class="show-banner-eng">NEW JOURNEY</view>
			<view class="show-banner-txt">从码头到世界</view>
			<view class="show-tips-txt">我们护航每一段征途</view>
			<button class="views-btn" @click="popupEvent('open')">查看详情</button>	
		</scroll-view>
		<pageFooter ref="tabbarRef" class="tabbarComp"></pageFooter>
		
		<uni-popup ref="popup" type="bottom" border-radius="10rpx 10rpx 0 0">
			<view class="popup-warp">
				<view class="popup-title">选择租赁类型</view>
				<view class="popup-type">
					<view class="type-item" v-for="(item,index) in typeList" :key="index">
						<view class="img-warp" @click="jumpPage(item)">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="item-txt">
							{{item.title}}
						</view>
					</view>
				</view>
				
				<view class="close-warp" @click="popupEvent('close')">
					<image src="@/static/images/close-icon.png" mode=""></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import pageFooter from '@/components/pageFooter/index.vue'
import youting from '@/static/images/youting.png'
import shuishang from '@/static/images/shuishang.png'
import yd from '@/static/images/yd.png'
import zsj from '@/static/images/zsj.png'
import { getProjectCategory } from '@/api/reserve.js'

export default{
		components:{
			pageFooter
		},
		 data(){
			 return {
				 scrollViewHeight:'100%',
				 maskHeight:'100%',
				 searchValue:'',
				 typeList:[
					 {imageUrl:youting,text:'游艇租赁',type:6},
					 {imageUrl:shuishang,text:'水上娱乐',type:5},
					 {imageUrl:zsj,text:'直升机',type:4},
					 {imageUrl:yd,text:'营地',type:3},
				 ]
			 }
		 },
		 onReady() {
			 // this.popupEvent('open')
			// #ifndef H5
			this.$nextTick(()=>{
				this.getScrollViewHeight()
			})
			// #endif
			this.getProjectCategory()
		 },
		 methods:{
			 getProjectCategory(){
				 getProjectCategory({}).then(res=>{
					 console.log('res====>',res);
					 this.typeList = res.data || []
				 })
			 },
			 getScrollViewHeight(){
				 const systemInfo = uni.getSystemInfoSync() || {}
				 this.maskHeight = systemInfo.screenHeight - systemInfo.statusBarHeight + 'px'			
				 uni.createSelectorQuery().in(this).select('.tabbarComp').boundingClientRect((data) => {
					if (data) {
						console.log('tabbar=======>',data);
						this.scrollViewHeight = systemInfo.screenHeight - systemInfo.statusBarHeight - data.height +'px'
					}
				}).exec(); 
			 },
			 jumpSearchPage(){
				 uni.navigateTo({
				 	url:'/pages/goods/goods_search/index'
				 })
			 },
			 jumpPage(item){
				 uni.navigateTo({ url:'/pages/index/project?type='+item.id })
				 this.popupEvent('close')
			 },
			 popupEvent(type){
				 this.$refs['popup'][type]()
			 }
		 }
	}
</script>

<style scoped lang="scss">
	page{
		width: 100vw;
		height: 100%;
		// background-color: red;
	}
	::-webkit-scrollbar{
		display: none !important;
	}
	
	.home-warp{
		width: 100%;
		height: 100%;
		.img-mask{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
		.container-show{
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 10;
			// background-image: url('/static/images/home-cover.jpg') no-repeat;
			// background-size: cover;
			// background-color: violet;
			.home-title{
				height: 90rpx;
				line-height: 90rpx;
				color: #fff;
				text-align: center;
				font-size: 36rpx;
			}
			.search-warp{
				width: 92%;
				margin: 20rpx auto 0;
				height: 98rpx;
				// background-color: red;	
				display: flex;
				align-items: center;
				.search-icon{
					width: 42rpx;
					height: 42rpx;
					// background-color: yellow;
				}
				.input-el{
					flex: 1;
					// background-color: gold;
					padding: 0 26rpx;
					font-size:28rpx;
					color: #fff;
				}
			}
			.placeholder-text{
				color: #fff;
			}
			.divider{
				width: 92%;
				height: 2rpx;
				margin: 0 auto;
				background-color: #fff;
				opacity: .44;
			}
			.show-banner-eng{
				width: 610rpx;
				height: 160rpx;
				text-align: center;
				margin: 68rpx auto 0;
				letter-spacing: 10rpx;
				color: rgba(2,44,58,0.6);
				font-size: 60rpx;
				font-weight: 300;
				background-color: #fff;
				background-clip: text;
				-webkit-text-stroke: 16rpx transparent;
			}
			.show-banner-txt{
				width: 100%;
				text-align: center;
				font-size: 80rpx;
				color: #FFFFFF;
				font-weight: 800;
			}
			.show-tips-txt{
				margin-top: 48rpx;
				font-weight: 300;
				font-size: 36rpx;
				color: #FFFFFF;
				text-align: center;
				letter-spacing: 28rpx;
			}
			.views-btn{
				width: 564rpx;
				height: 96rpx;
				margin: 360rpx auto 0;
				font-size: 32rpx;
				background-color: transparent;
				color: #fff;
				border-radius: 56rpx;
				border: 2rpx solid #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				// text-align: center;
				// line-height: 96rpx;
			}
			.views-btn:active{
				opacity: .7;
				background: linear-gradient(124deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 70%, transparent 70%, transparent);
				background-size: 200% 100%;
				animation: scanLineAnimation .2s linear forwards;
			}
		}
	}
	
	.popup-warp{
		width: 100%;
		height: 600rpx;
		height: 614rpx;
		background: #fff;
		border-radius: 78rpx 78rpx 0rpx 0rpx;
		padding-top: 20rpx;
		.popup-title{
			width: 100%;
			height: 60rpx;
			text-align: center;
			margin: 20rpx auto;
			font-weight: 300;
			font-size: 32rpx;
		}
		.popup-type{
			width: 100%;
			min-height: 160rpx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			.type-item{
				width: 120rpx;
				height: 100%;
				.img-warp{
					width: 120rpx;
					height: 120rpx;
					image{
						width: 100%;
						height: 100%;
						vertical-align: top;
					}
				}
				.item-txt{
					text-align: center;
					font-size: 24rpx;
					color: #333333;
					margin-top: 24rpx;
				}
			}
		}
		.close-warp{
			margin: 80rpx auto;
			width: 80rpx;
			height: 80rpx;
			image{
				width: 100%;
				height: 100%;
				vertical-align: top;
			}
		}
	}
	@keyframes scanLineAnimation {
	  0% {
	    background-position: -100% 0;
	  }
	  100% {
	    background-position: 25% 0;
	  }
	}
</style>